<!DOCTYPE html>
<html class="h-full">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入 Tailwind CSS -->
</head>
<body class="h-full">
  <!-- 根容器：全屏宽高，使用 flex 布局 -->
  <div class="min-h-screen flex flex-col">
    <!-- Header：最小高度 32px -->
    <header class="min-h-8 bg-blue-200 p-2">
      Header Content
    </header>

    <!-- Content：自动填充剩余空间，可滚动 -->
    <main class="flex-1 overflow-auto bg-gray-100 p-4">
      <div class="h-[2000px]">可滚动内容区域（示例）</div>
    </main>

    <!-- Footer：最小高度 32px -->
    <footer class="min-h-8 bg-blue-200 p-2">
      Footer Content
    </footer>
  </div>
</body>
</html>